<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-06-16 10:16:50
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-11-17 11:52:51
 * @FilePath     : \rpms\src\views\project\check\detail\index.vue
-->
<template>
  <div>
    <!-- <el-card> -->
      <el-table
        :data="model.tableData"
        border
        :header-cell-style="{
          background: '#eef1f6',
          color: '#606266'
        }"
      >
        <template #empty>
          <el-empty :image-size="40" description="暂无数据"></el-empty>
        </template>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="target" label="目标及考核指标"></el-table-column>
        <el-table-column label="类型">
          <template #default="{ row }">
            {{
              row.resultType &&
              model.types.find(el => el.key === row.resultType).label
            }}
          </template>
        </el-table-column>
        <el-table-column prop="num" label="数值"></el-table-column>

        <el-table-column prop="finishStatus" label="是否完成">
          <template #default="{ row }">
            {{ row.finishStatus === "0" ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="finishTime" label="完成时间"></el-table-column>
        <el-table-column prop="finishDesc" label="完成情况"></el-table-column>

        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row, $index }">
            <el-button type="text" @click="edit(row, $index)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    <!-- </el-card> -->

    <el-dialog
      title="编辑目标及考核指标"
      v-model="model.dialogFormVisible"
      destroy-on-close
      width="45vw"
    >
      <el-form
        :model="formObj.formData"
        @submit.prevent
        ref="dialogFormRef"
        label-width="150px"
      >
        <el-row>
          <el-col>
            <el-form-item label="目标及考核指标">
              {{ formObj.formData.target }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="类型">
              {{
                formObj.formData.resultType &&
                model.types.find(el => el.key === formObj.formData.resultType)
                  .label
              }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="数值">
              {{ formObj.formData.num }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="是否完成" prop="finishStatus">
              <el-select
                disabled
                style="width: 100%"
                v-model="formObj.formData.finishStatus"
                clearable
                placeholder="请选择"
                value-key="id"
              >
                <el-option
                  v-for="item in model.dones"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item> </el-col
        ></el-row>

        <el-row>
          <el-col>
            <el-form-item label="完成时间" prop="finishTime">
              <el-date-picker
                disabled
                style="width: 100%"
                v-model="formObj.formData.finishTime"
                value-format="YYYY-MM-DD hh:mm:ss"
                type="date"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="完成情况" prop="finishDesc">
              <el-input
                disabled
                type="textarea"
                v-model="formObj.formData.finishDesc"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="科研成果">
              <el-select
                disabled
                v-model="model.scientifics"
                clearable
                filterable
                multiple
                placeholder="请输入科研名称"
                style="width: 100%"
                remote
              >
                <el-option
                  v-for="item in model.scientificList"
                  :key="item.id"
                  :label="item.kyName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-table
                v-if="model.scientificTableList.length > 0"
                :data="model.scientificTableList"
                border
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              >
                <el-table-column type="index" label="序号" />
                <el-table-column prop="kyNum" label="编号"> </el-table-column>
                <el-table-column prop="kyName" label="成果名称">
                </el-table-column>

                <el-table-column label="成果来源">
                  <template #default="{ row }">
                    {{ row.kyTypeName || "其他" }}
                  </template>
                </el-table-column>
                <el-table-column label="附件">
                  <template #default="scope">
                    <el-upload
                      name="uploadFile"
                      :file-list="scope.row.kyAttachmentArr"
                      :on-preview="handlePreview"
                    >
                    </el-upload>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                  <template #default="{ row }">
                    <el-button type="text" size="small" @click="jump(row)"
                      >查看详情</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-input type="textarea" v-model="formObj.formData.finishDesc" /> -->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="附件">
              <el-upload
                name="uploadFile"
                multiple
                :accept="acceptTypes"
                :action="uploadComUrl"
                :headers="uploadHeaders"
                :on-success="handlelSuccess"
                :on-remove="handlelRemove"
                :on-error="handleError"
                :file-list="model.defaultFileList"
                :before-upload="beforeAvatarUpload"
                :on-preview="handlePreview"
              >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-row justify="end">
        <el-button @click="model.dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="model.dialogFormVisible = false"
          >确 定</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, nextTick } from "vue";
import { useRoute } from "vue-router";
import { getAacceptanceById } from "/@/api/project";
import { cloneDeep } from "lodash-es";
import { useUpload } from "/@/hooks";
const route = useRoute();
let formObj = reactive({
  formData: {
    type: "",
    num: "",
    target: "",
    finishStatus: "",
    finishTime: "",
    finishDesc: "",
    attachmentList: []
  }
});
const model = reactive({
  scientifics: [],
  scientificList: [],
  scientificTableList: [],
  index: 0,
  types: [
    { key: "1", label: "新产品" },
    { key: "2", label: "新装置" },
    { key: "3", label: "新材料" },
    { key: "4", label: "新工艺/方法/模式" },
    { key: "5", label: "专利" },
    { key: "6", label: "软件著作权" },
    { key: "7", label: "论文" },
    { key: "8", label: "专著" },
    { key: "9", label: "标准" },
    { key: "10", label: "研究报告" },
    { key: "11", label: "计算机软件" },
    { key: "12", label: "技术指标" },
    { key: "13", label: "其他" }
  ],
  tableData: [],
  dialogFormVisible: false,
  dones: [
    { key: "0", label: "是" },
    { key: "1", label: "否" }
  ],
  defaultFileList: []
});

const {
  handleError,
  beforeAvatarUpload,
  uploadComUrl,
  acceptTypes,
  uploadHeaders
} = useUpload();

//查询项目详情
const initProjectInfo = async () => {
  try {
    //项目id，对于专家评审等特殊流程，业务id和项目id是分开的
    const queryId = route.query?.projectManageId ? route.query?.projectManageId : route.query?.id ?? "";
    const res = await getAacceptanceById(queryId);
    if (res.code === 200 && res.data != null) {
      res.data.projectTargetList.map(el => {
        if (el.scientificAchv) {
          const strArr = el.scientificAchv.split(",");
          el.scientificAchv = strArr.map(str => +str);
        }
        if (el.scientificAchvs) {
          el.scientificAchvs.map(obj => {
            if (obj.kyAttachmentArr == null) {
              obj.kyAttachmentArr = [];
            } else {
              obj.kyAttachmentArr.map(file => {
                file["name"] = file.fileName;
              });
            }
          });
        }
      });
      model.tableData = res.data.projectTargetList;
    }
  } catch (err) {
    console.log(err);
  }
};

const edit = (row, index) => {
  model.scientifics = row.scientificAchv || [];
  model.scientificList = row.scientificAchvs || [];
  model.scientificTableList = row.scientificAchvs || [];
  model.index = index;
  model.dialogFormVisible = true;
  formObj.formData = cloneDeep(row);
  if (formObj.formData.attachmentList) {
    formObj.formData.attachmentList.map(el => {
      el["name"] = el.fileName;
    });
    model.defaultFileList = formObj.formData.attachmentList;
  }
};

const handlePreview = (item: any) => {
  if (item.response) {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
    );
  } else {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
    );
  }
};

const handlelSuccess = (res, file, fileList) => {
  if (res.code === 200) {
    nextTick(() => {
      model.defaultFileList = fileList;
      if (!formObj.formData.attachmentList) {
        formObj.formData.attachmentList = [];
      }
      formObj.formData.attachmentList.push(res.data);
      formObj.formData.attachmentList.map(el => {
        el["name"] = el.fileName;
      });
    });
  }
};

const handlelRemove = (file, fileList) => {
  model.defaultFileList = fileList;
  formObj.formData.attachmentList = formObj.formData.attachmentList.filter(
    item => {
      const uuid = file.response ? file.response.data.uuidFile : file.uuidFile;
      return item.uuidFile !== uuid;
    }
  );
};

const jump = item => {
  const local = location.href.split("#")[0];
  let path = "";
  switch (item.kyTypeName) {
    case "专利":
      path = "#/document/scientific/patent";
      break;
    case "软件著作":
      path = "#/document/scientific/software";
      break;
    case "论文":
      path = "#/document/scientific/paper";
      break;
    case "专著":
      path = "#/document/scientific/book";
      break;
    case "标准":
      path = "#/document/scientific/standard";
      break;
    case "科技奖励":
      path = "#/document/scientific/award";
      break;
    case "科技制度建设":
      path = "#/document/scientific/building";
      break;
    default:
      path = "#/document/scientific/other";
      window.open(
        `${local}${path}?id=${item.id}&projectNum=${item.projectManageCode}&mode='look'`
      );
      return;
  }

  window.open(
    `${local}${path}?id=${item.kyId}&projectNum=${item.projectManageCode}&mode='look'`
  );
};

initProjectInfo();
</script>

<style lang="scss" scoped>
.empt-content {
  height: calc(100vh - 200px);
  width: 100%;
}
.card-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header-btn {
    font-size: 14px;
    cursor: pointer;
  }
}
</style>
